<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <link rel="stylesheet" href="../css/001reset.css">
    <style type="text/css">
        .list_con {
            width: 600px;
            margin: 50px auto 0;
        }

        .inputtxt {
            width: 550px;
            height: 30px;
            border: 1px solid #ccc;
            padding: 0px;
            text-indent: 10px;
        }

        .inputbtn {
            width: 40px;
            height: 32px;
            padding: 0px;
            border: 1px solid #ccc;
        }

        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-top: 20px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .list li span {
            float: left;
        }

        .list li a {
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
        /*------------------------------------------------------------------------------------*/
        .pop_main{
            display: none;
            /*width: 502px;
            height: 302px;
            position: fixed;
            left: 50%;
            margin-left: -251px;
            top: 50%;
            margin-top: -151px;
            background-color: #fff;
            border-radius: 4px;
            display: none;
            z-index: 1100;*/
        }
        .pop_con{
            width: 502px;
            height: 302px;
            position: fixed;
            left: 50%;
            margin-left: -251px;
            top: 50%;
            margin-top: -151px;
            background-color: #fff;
            border-radius: 4px;;
            z-index: 1100;
        }
        .pop_title{
            width: 490px;
            height: 40px;
            background-color: #1084ef;
            border-radius: 4px;
            margin: 6px auto 0px;
        }
        .pop_title h3{
            text-indent: 12px;
            line-height: 40px;
            font: normal 18px/40px "Microsoft Yahei";
            color: #fff;
            float: left;
        }
        .pop_title a{
            width:20px;
            height: 20px;
            border-radius: 3px;
            background-color: #fff;
            margin: 10px 10px 0px 10px;
            font-size: 9px;
            font-family: "Microsoft Yahei";
            line-height: 20px;
            text-indent: 6px;
            float: right;
        }
        .pop_detail{
            height: 18px; 
            margin: 100px 0 0 78px;
        }
        .pop_detail .pop_text{
            font-size: 18px;
            line-height: 18px;
            font-family: "Microsft Yahei";
            padding: 0;
            border: 0;
        }
        .pop_footer{
            height: 55px;
            border-top: 1px solid #f7f7f7;
            margin-top: 102px;
        }
        .pop_footer input{
            width: 100px;
            height: 36px;
            background-color: #dedede;
            font-size: 16px;
            line-height: 36px;
            font-family: "Microsoft Yahei";
            float: right;
            border: 0;
            margin-right: 21px;
        }
        .pop_footer .confirm{
            background-color: #1084ef;
            color: #fff;
            margin-right: 10px;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            background-color: #000;
            opacity: 0.3;
            filter: alpha(opacity=30);
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 获取列表对象用于显示
            var $oList = $('.list');
            // 获取输入框里的内容用于增加计划
            var $oInputTxt = $('.inputtxt');
            // 获取提交按钮用于提交变化
            var $oInputBtn = $('.inputbtn');
            // 提交按钮事件
            $oInputBtn.click(function () {
                // 修改显示内容
                // console.log($oInputTxt.val());
                if ($oInputTxt.val() == "") {
                    alert("请输入内容");
                    return;
                }
                var $sTr = $('<li><span>' + $oInputTxt.val() + '</span><a href="javascript:;" class="edit">编辑</a><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
                $oList.append($sTr);
                // console.log($oList.html());
                // 清空输入框
                $oInputTxt.val("");
            });

            // 删除按钮事件,操作对象必须已经存在
            $('.list').delegate('li .del', 'click', function () {
                $(this).parent().remove();
            });

            // 向上移动按钮事件，操作对象向上插入
            $('.list').delegate('li .up', 'click', function () {
                // 获取前一个列表
                $oPrevLi = $(this).parent().prev();
                // 如果已经是第一个元素了
                if ($oPrevLi.length == 0) {
                    alert('顶部');
                } else {
                    $(this).parent().after($oPrevLi);
                }

            });
            // 向下移动按钮事件，操作对象向下插入
            $('.list').delegate('li .down', 'click', function () {
                // 获取后一个列表
                $oNextLi = $(this).parent().next();
                // 如果已经是最后一个元素
                if ($oNextLi.length == 0) {
                    alert('底部');
                } else {
                    $(this).parent().before($oNextLi);
                }
            });

            // 获取弹框对象
            var $oPop_main=$(".pop_main"); 
            // 添加编辑按钮事件
            $('.list').delegate('li .edit', "click", function () {
                var iIndex=$(this).parent().index();
                $oPop_main.find(".pop_edittext").val($(this).parent().find("span").html());
                $oPop_main.show();
                // $("body").css({backgroundColor:'#000',opacity:0.3});
                $oPop_main.find(".pop_title a").click(function () {
                    $oPop_main.hide();
                });
                $oPop_main.find(".cancel").click(function () {
                    $oPop_main.hide();
                });
                $oPop_main.find(".confirm").click(function () {
                    var sTr=$oPop_main.find(".pop_edittext").val();
                    // alert(sTr);
                    if(sTr==''){
                        alert("请输入内容");
                    }else{
                        $(".list li").eq(iIndex).find("span").html(sTr);
                        $oPop_main.hide();
                    }
                });
            });
        })
    </script>
</head>

<body>

    <div class="list_con">
        <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">

        <ul id="list" class="list">

            <li>
                <span>学习html</span>
                <a href="javascript:;" class="edit">编辑</a>
                <a href="javascript:;" class="up"> ↑ </a>
                <a href="javascript:;" class="down"> ↓ </a>
                <a href="javascript:;" class="del">删除</a>
            </li>
            <li>
                <span>学习css</span>
                <a href="javascript:;" class="edit">编辑</a>
                <a href="javascript:;" class="up"> ↑ </a>
                <a href="javascript:;" class="down"> ↓ </a>
                <a href="javascript:;" class="del">删除</a>
            </li>
            <li>
                <span>学习javascript</span>
                <a href="javascript:;" class="edit">编辑</a>
                <a href="javascript:;" class="up"> ↑ </a>
                <a href="javascript:;" class="down"> ↓ </a>
                <a href="javascript:;" class="del">删除</a>
            </li>

        </ul>

    </div>
    <div class="pop_main">
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#">×</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">修改为</p>
                <input type="text" class="pop_edittext">
            </div>
            <div class="pop_footer">
                <input type="button" value="取 消" class="cancel">
                <input type="button" value="确 定" class="confirm">
            </div>
        </div>
        <div class="mask"></div>
    </div>

</body>

</html>